<html>
<head>
    <meta charset="utf-8">
    <title>双列布局</title>
    <style>
        .con {
            width: 100%;
            height: 100%;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #e60000;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: #2116be;
        }

        .aside {
            width: 30%;
            height: 700px;
            background-color: #be1656;
            float: left;
        }

        .main {
            width: 70%;
            height: 700px;
            background-color: #16be2c;
            float: right;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: #e4f500;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="con">
        <header class="header"></header>
        <nav class="nav"></nav>
        <aside class="aside"></aside>
        <section class="main"></section>
        <footer class="footer"></footer>
    </div>
</body>
</html>